import React, { Component,useState } from 'react'
import logo from "./logo.svg";
import "./App.css";
import Radio from "./components/day5/Radio"
import MultiSelect from "./components/day5/MultiSelect"
import ComboBox from "./components/day5/ComboBox"
// import Tab from "./components/day5/tab"
import Model from "./components/Model"
import Tab from "./components/Model/Tab"

export default class App extends Component {
	constructor(props) {
	    super(props)
		
	}
	
	
	state = {
		activeIndex1: [],
		activeIndex:0,
	    text: '爱好',
	    show: false,
	    data1: ['M', "L", "XL", "XXL", 'XXXL', 'XXXXL'],
		arr : [
		  { value: "真高", id: 1 },
		  { value: "实用", id: 2 },
		  { value: "便宜", id: 3 },
		],
		data2: ['打篮球', '踢足球', '打游戏', '写作业', '睡觉', '上课'],
		likes: [],
		tabs:[
		    {tabName:"社会新闻",id:1},
		    {tabName:"体育世界",id:2},
		    {tabName:"娱乐圈",id:3},
		],
		currentIndex:1,
		isShow:false,
		arr:[]
	}
	
	closeFn=()=>{
	  console.log("触发了取消")
	  this.setState({
	  		isShow:!this.state.isShow
	  })
	}
	
	okFn=()=>{
	  console.log("触发了确认")
	  // 点击确认
		let name=this.refs.name.value;
		let price=this.refs.price.value;
		console.log(name,price)
		this.setState({
			name:name,
			price:price
		
		})
		// 判断输入框是否为空
	  	if (name.value != '' && price.value != '') {
	  		let obj = {
	  			name: name.value,
	  			price: price.value,
	  			checked: false,
	  			num: 1
	  		}
	  		// 将数据添加到数组中
	  		this.arr.push(obj);
	  		console.log(this.arr);
	  		//关闭遮蔽层
	  		this.setState({
	  			isShow:!this.state.isShow
	  		})
	  	} else {
	  		alert('请输入商品名称和价格');
	  	}
	  }
	
	
	toogle=()=> {
	   this.setState({
	   		isShow:!this.state.isShow
	   })
	}
	
	// tab切换
	tabChoiced=(id)=>{
	    //tab切换到方法
		console.log(id)
	    this.setState({
	        currentIndex:id,
	    });
	}
	
	// 下拉框点击事件
	checked = (index,item) => {
	    console.log(index,item);
	    this.setState({
	        checkedIndex: index,
	        text :item,
	        show:false,
	
	    })
	}
	shows = () => {
	
	    this.setState({
	        show: !this.state.show,
	    })
	}
	
	//   切换方法
	toogleChange=(index)=> {
		  console.log(index)
	  if (this.state.activeIndex1.indexOf(index) == -1) {
	    this.setState({
	      activeIndex1: [...this.state.activeIndex1, index]
	    }, () => {
	      console.log(this.state.activeIndex1);
	    })
	  }else{
	    this.state.activeIndex1.splice(this.state.activeIndex1.indexOf(index),1)
	    this.setState({
	      activeIndex1:this.state.activeIndex1
	    },()=>{
	      console.log(this.state.activeIndex1);
	    })
	  }
	}
	
	render(){
	return (
	  <div className="App">
		  {/* <Radio arr={this.state.arr}/>
		  <Checkbox arr={this.state.arr}/>
		  <MultiSelect arr={this.state.arr} activeIndex={this.state.activeIndex1}  toogleChange={this.toogleChange} />
		  <ComboBox state={this.state} data={this.state.data2} checked={this.checked} shows={this.shows}/>
		  <Tab state={this.state} tabChoiced={this.tabChoiced}/> */}
		  
		  <button onClick={this.toogle}>添加商品</button>
		  <Tab state={this.state}>添加商品</Tab>
		  <Model close={this.closeFn} toogle={this.toogle} ok={this.okFn} state={this.state} title={'添加商品'} height={"400px"}>
		        <p>
		            <input id="name" ref='name' type="text" placeholder="请输入商品名称"/>
		        </p>
		        <p>
		            <input id="price" ref="price" type="text" placeholder="请输入商品价格"/>
		        </p>    
		  </Model>
	  </div>
	  )}
}

